/**
 * Created by mapbar_front on 2018/1/28.
 */


import React,{ Component } from 'react';
import { Table,Icon,Divider } from 'antd';


const { Column,ColumnGroup }  = Table;
let data = [{
    key: 1,
    firstName: '花骨朵',
    lastName: 'huaguduo',
    age: 18,
    hobby: '看书',
},{
    key: 2,
    firstName: '天下',
    lastName: 'tianxia',
    age: 22,
    hobby: '诗歌',
},{
    key: 3,
    firstName: '晓晓',
    lastName: 'xiaoxiao',
    age: 16,
    hobby: '旅游',
}]



//JSX风格的API
//这个只是一个描述columns的语法糖，所以你不能用其他组件包裹Column和ColumnGroup

class JsxStyleApi extends Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    render() {
        return (

            <Table dataSource={ data }>
                <ColumnGroup title="Name">
                    <Column
                    title="FirstName"
                    dataIndex = 'firstName'
                    key="firstName">
                    </Column>
                    <Column
                    title="LastName"
                    dataIndex="lastName"
                    key="lastName">

                    </Column>
                </ColumnGroup>
                <ColumnGroup title="内容">
                    <Column
                        title="Age"
                        dataIndex="age"
                        key="age"
                    />
                    <Column
                        title="Hobby"
                        dataIndex="hobby"
                        key="hobby"
                    />
                    <Column
                        title="Action"
                        dataIndex="action"
                        key="action"
                        render = { ( text,record )=>(
                            <span>
                            <a href="#">Action--{ record.firstName }</a>
                            <Divider type="vertical" />
                            <a href="#">Delete</a>
                            <Divider type="vertical" />
                            <a href="#" className="antd-dropdown-link">
                                More actions <Icon type="down"/>
                            </a>
                        </span>
                        )}
                    />
                </ColumnGroup>

            </Table>
        )
    }
}
export default JsxStyleApi;